<template>
  <div class="myAddr">
    <div class="header-top">
      <div @click="leftBtn" class="arrow-left">
          <img src="../../images/jiantou.png" alt="">
      </div>
    </div>
    <div
      class="addr-card"
      v-for="(item,index) in addressArr"
      :key="index"
      @click="choseAddress(index)"
    >
      <div class="card-userInfo">
        <span class="user-name">{{item.contactName}}</span>
        <span class="user-tel">{{item.telNumber}}</span>
      </div>
      <div class="card-addrInfo">
        <span class="addr-detail">收货地址：{{item.provinceName+item.cityName+(item.districtName||'')+item.detailedAddress}}</span>
      </div>
      <div class="card-options">
        <div
          @click.stop="setDefault(item.id)"
          class="card-setdefalut"
        >
          <div :class="['select',{active:item.isDefault=='y'}]">
            <img
              src="../../images/gou.png"
              alt=""
            >
          </div>
          <span :class="{active:item.isDefault=='y'}">{{item.isDefault=='y'?'默认地址':'设为默认'}}</span>
        </div>
        <div class="card-option">
          <div
            @click.stop="linkTo('/changeAddr?addressId='+item.id)"
            class="option-change"
          >
            <img
              :src="editIcon"
              class="imgClass"
            />
            <span class="option-text">编辑</span>
          </div>
          <div
            @click.stop="deleteAddress(item.id,index)"
            class="option-change"
          >
            <img
              :src="removeIcon"
              class="imgClass"
            >
            <span class="option-text">删除</span>
          </div>
        </div>
      </div>
    </div>
    <div
      @click="linkTo(`/changeAddr?type=${type}&id=${id}&cartNum=${cartNum}&index=${index}&ids=${ids}&len=${addressArr.length}`)"
      class="add-btn"
    >新增收货地址</div>
  </div>
</template>

<script>
import checkIcon from "@/components/common/checkIcon.vue";
const removeIcon = require("../../images/icon-remove.png");
const editIcon = require("../../images/icon-edit.png");
import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";
export default {
  data() {
    return {
      removeIcon,
      editIcon,
      addressArr: [],
      isDefault: true,
      id:null,
      ndex:null,
      cartNum:null, 
      ids:null, 
      type:null
    };
  },
  mounted() {
    let { id, index, cartNum, ids, type } = this.$router.currentRoute.query;
    this.type = type;
    this.id = id;
    this.cartNum = cartNum
    this.index = index;
    this.ids = ids
    this.getList();
  },
  methods: {
    leftBtn(){
      this.$router.back(-1)
    },
    choseAddress(index){
      common.setCookie('addressObj',JSON.stringify(this.addressArr[index]))
      this.$router.replace(`account?type=${this.type}&id=${this.id}&cartNum=${this.cartNum}&index=${this.index}&ids=${this.ids}`)
    },
    deleteAddress(id,num) {
      let that = this;
      this.$vux.confirm.show({
        title: "操作提示",
        content: "确定删除吗？",
        onCancel() {
          console.log("plugin cancel");
        },
        onConfirm() {
          let url = CONSTANT.LIST.ADDRESSDELETE;
          common.deleteRequest(url, id, res => {
            if (res.code == 200) {
              that.$vux.toast.show({
                type: "success",
                text: "删除成功"
              });
              that.addressArr.splice(num,1)
            }
          });
        }
      });
    },
    setDefault(id) {
      this.$vux.loading.show({
        text: "设置中"
      });
      let url = CONSTANT.LIST.SETADDRESSFAULT;
      common.get(url, id, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          this.addressArr.forEach(item => {
            item.isDefault = "n";
            if (item.id == id) {
              item.isDefault = "y";
            }
          });
          this.$vux.toast.show({
            type: "success",
            text: "设置成功"
          });
        }
      });
    },
    getList() {
      this.$vux.loading.show({
        text: "加载中"
      });
      let param = {
        pageIndex: 1,
        pageSize: 1000
      };
      let url = CONSTANT.LIST.ADDRESSLIST;
      common.post(url, param, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          this.addressArr = res.data.bussData;
        }
      });
    },
    linkTo(link) {
      this.$router.push(link);
    }
  },
  components: {
    checkIcon
  }
};
</script>

<style lang="less">
.myAddr {
  font-family: PingFang-SC-Light;
  width: 100%;
  height: 100%;
  background: #f7f7f7;
  .header-top{
    height: .8rem;
    line-height: .8rem;
    background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
    .arrow-left{
      position: absolute;
      left: .1rem;
      top: .1rem;
      height: .9rem;
      width: 1rem;
      z-index: 99;
      img{
        height: .5rem;
        width: .5rem;
      }
    }
  }
  .add-btn {
    width: 6.9rem;
    height: 0.88rem;
    line-height: 0.88rem;
    margin: 1rem auto 0.3rem;
    text-align: center;
    background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
    border-radius: 44px;
    font-size: 0.32rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }
  .addr-card {
    background: white;
    margin-top: 0.21rem;
    padding: 0.37rem 0.23rem 0rem 0.22rem;
    &:last-child {
      margin-bottom: 3.4rem;
    }
    .card-userInfo {
      padding-right: 0.04rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      font-size: 0.29rem;
      color: black;
      .user-tel {
        font-size: 0.27rem;
      }
    }
    .card-addrInfo {
      border-bottom: 1px solid rgba(126, 86, 198, 0.22);
      padding: 0.33rem 0rem 0.36rem 0rem;
      font-size: 0.28rem;
      color: rgba(102, 102, 102, 1);
    }
    .card-options {
      padding-right: 0.04rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 1rem;
      color: rgba(159, 159, 159, 1);
      font-size: 0.28rem;
      .card-setdefalut {
        display: flex;
        flex-direction: row;
        align-items: center;
        span.active {
          color: #FF7268;
        }
        .select {
          width: 0.36rem;
          height: 0.36rem;
          border-radius: 50%;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(153, 153, 153, 1);
          text-align: center;
          line-height: 0.36rem;
          margin-right: 0.2rem;
          &.active {
            background: #FF7268;
            border: 0px;
            img {
              display: inline-block;
            }
          }
          img {
            display: none;
            width: 0.2rem;
            height: 0.14rem;
          }
        }
        .vux-check-icon {
          position: relative;
          bottom: 0.03rem;
        }
        .weui-icon-success {
          font-size: 0.36rem !important;
        }
        .weui-icon-circle {
          font-size: 0.36rem !important;
        }
      }
      .card-option {
        display: flex;
        flex-direction: row;
        align-items: center;
        .option-change {
          margin-left: 0.56rem;
        }
        .imgClass {
          width: 0.3rem;
          height: 0.3rem;
          vertical-align: sub;
        }
      }
    }
  }
}
</style>
